<!DOCTYPE html>
<html>
<head>
	<title>撩学堂，助力你的IT梦想</title>
	<meta charset="utf-8">
	<meta name="keywords" content="IT在线教育">
	<meta name="description" content="IT在线教育培训，前端开发">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body style="height: 3000px;">
<!--顶部通栏-->
<nav id="nav">
	<div class="container">
		<!--通栏左侧-->
		<ul class="nav_left fl">
			<li><a href="#">撩学堂</a></li>
			<li><a href="#">视频平台</a></li>
			<li><a href="#">软件工具</a></li>
			<li><a href="#">专题学习</a></li>
		</ul>
		<!--通栏右侧-->
		<ul class="navRight fr">
			<li><a href="#" class="vip">VIP会员</a></li>
			<li class="hasMore"><a href="#">教学中心</a><i class="icon"></i></li>
			<li class="hasMore"><a href="#">用户名</a><i class="icon"></i></li>
			<li><a href="#">购物车<em>(0)</em></a></li>
			<li><a href="#">消息<em>(388)</em></a></li>
			<li><a href="#">购物车</a></li>
			<li><a href="#">网站导航</a></li>
		</ul>
	</div>
</nav>
<!--头部导航-->
<header id="header">
	<div class="container">
		<!--logo-->
		<h1 class="headerLogo fl"><a href="#"><img src="images/logo.png" width="130"></a></h1>
		<!--左侧列表-->
		<ul class="headerItem fl">
			<li><a href="#" target="_self">免费课程</a></li>
			<li><a href="#" target="_self">实战课程</a></li>
			<li><a href="#" target="_self">撩微课<i class="iconNew"></i></a></li>
			<li><a href="#" target="_self">撩专栏</a></li>
			<li><a href="#" target="_self">撩问答</a></li>
			<li><a href="#" target="_self">撩直聘</a></li>
		</ul>
		<!--搜索-->
		<div class="headerSearch fl">
			<div class="headerSearchArea">
				<input type="text" class="searchInput" placeholder="搜一搜">
				<div class="hotTag">
					<a href="#" target="_blank">vue</a>
					<a href="#" target="_blank">node</a>
				</div>
				<div class="searchIcon">
					<i class="iconSearch"></i>
				</div>
			</div>
		</div>
		<!--登录注册-->
		<div class="headerLogin fr">
			<a href="#">登录</a>/
			<a href="#">注册</a>
		</div>
	</div>
</header>
<!--轮播中心-->
<section id="sowing">
	<div class="container">
		<div class="sowingItem">
			<a href="#"><img src="images/center1.png"></a>
			<div class="sowingCarouse">
				<ul class="sowingCarouseIndicators">
					<li><a href="#" class="active">高新求职：全链路培养UI设计师</a></li>
					<li><a href="#">Java开发：带你玩转架构核心技术</a></li>
					<li><a href="#">趣味课堂：让你的远程办公自动化</a></li>
					<li><a href="#">用算法思维让编程更高效</a></li>
					<li><a href="#">英语口语：生活场景全覆盖</a></li>
					<li><a href="#">懒人模板：6大AE视频制作速成</a></li>
					<li><a href="#">撩课堂线上开课绿色通道</a></li>
				</ul>
		</div>
		</div>
	</div>
</section>

<!--推荐板块-->
<section id="recommand">
	<!--零基础就业-->
	<section class="types">
		<div class="container">
			<!--标题-->
			<h3 class="recommandTitle clearfix"><span>零基础就业</span><span class="intro">零基础快速就业</span></h3>
			<!--内容-->
			<div class="typesList clearfix">
				<a href="#" target="_blank">
					<i class="iWeb"></i>
					<p class="title">Web前端工程师</p>
					<p class="desc">从未接触编程也可以学好</p>
				</a>
				<a href="#" target="_blank">
					<i class="iJava"></i>
					<p class="title">Java工程师</p>
					<p class="desc">综合就业排名第一</p>
				</a>
				<a href="#" target="_blank">
					<i class="iPython"></i>
					<p class="title">Python工程师</p>
					<p class="desc">应用领域最为广泛</p>
				</a>
				<a href="#" target="_blank">
					<i class="iAndroid"></i>
					<p class="title">Android工程师</p>
					<p class="desc">移动市场份额第一</p>
				</a>
				<a href="#" target="_blank">
					<i class="iPhp"></i>
					<p class="title">PHP工程师</p>
					<p class="desc">Web开发首选语言</p>
				</a>
			</div>
		</div>
	</section>
	<!--职场提升-->
	<section class="job">
		<div class="container clearfix">
			<!--标题-->
			<h3 class="recommandTitle clearfix"><span>职场提升</span><span class="intro">1年以上开发经验系统成长</span></h3>
			<div class="jobList">
				<a href="#"><div class="jobListItem" style="background-image: url('images/center1.png');"></div></a>
				<a href="#"><div class="jobListItem" style="background-image: url('images/center2.png');"></div></a>
				<a href="#"><div class="jobListItem" style="background-image: url('images/center3.png');"></div></a>
			</div>
		</div>
	</section>
</section>

<!--课堂直播-->
<section id="live">
	<div class="container">
		<h3 class="liveTitle">
			<span>课堂直播</span>
			<a href="#">查看更多<i><img src="images/more.png"></i></a>
		</h3>
		<div class="liveContent">
			<div class="liveContentItem">
				<!--左边-->
				<div class="liveContentCard"><img src="images/p1.png"></div>
				<!--右边-->
				<div class="liveContentRight">
					<div class="liveContentRightTop">
						<span><img src="images/play.png"></span>
						<span>进入直播</span>
					</div>
					<div class="liveContentRightTitle">【热】Web全栈3期筑基期综合页面实战</div>
					<div class="liveContentRightBottom">叶建华 撩学堂金牌讲师</div>
				</div>
			</div>

			<div class="liveContentItem">
				<!--左边-->
				<div class="liveContentCard"><img src="images/p1.png"></div>
				<!--右边-->
				<div class="liveContentRight">
					<div class="liveContentRightTop">
						<span><img src="images/play.png"></span>
						<span>进入直播</span>
					</div>
					<div class="liveContentRightTitle">【热】Web全栈3期筑基期综合页面实战</div>
					<div class="liveContentRightBottom">叶建华 撩学堂金牌讲师</div>
				</div>
			</div>

			<div class="liveContentItem">
				<!--左边-->
				<div class="liveContentCard"><img src="images/p1.png"></div>
				<!--右边-->
				<div class="liveContentRight">
					<div class="liveContentRightTop">
						<span>今天19:30</span>
						<span>进入直播</span>
					</div>
					<div class="liveContentRightTitle">【热】Web全栈3期筑基期综合页面实战</div>
					<div class="liveContentRightBottom">叶建华 撩学堂金牌讲师</div>
				</div>
			</div>

			<div class="liveContentItem">
				<!--左边-->
				<div class="liveContentCard"><img src="images/p1.png"></div>
				<!--右边-->
				<div class="liveContentRight">
					<div class="liveContentRightTop">
						<span><img src="images/play.png"></span>
						<span>进入直播</span>
					</div>
					<div class="liveContentRightTitle">【热】Web全栈3期筑基期综合页面实战</div>
					<div class="liveContentRightBottom">叶建华 撩学堂金牌讲师</div>
				</div>
			</div>

			<div class="liveContentItem">
				<!--左边-->
				<div class="liveContentCard"><img src="images/p1.png"></div>
				<!--右边-->
				<div class="liveContentRight">
					<div class="liveContentRightTop">
						<span><img src="images/play.png"></span>
						<span>进入直播</span>
					</div>
					<div class="liveContentRightTitle">【热】Web全栈3期筑基期综合页面实战</div>
					<div class="liveContentRightBottom">叶建华 撩学堂金牌讲师</div>
				</div>
			</div>

			<div class="liveContentItem">
				<!--左边-->
				<div class="liveContentCard"><img src="images/p1.png"></div>
				<!--右边-->
				<div class="liveContentRight">
					<div class="liveContentRightTop">
						<span><img src="images/play.png"></span>
						<span>进入直播</span>
					</div>
					<div class="liveContentRightTitle">【热】Web全栈3期筑基期综合页面实战</div>
					<div class="liveContentRightBottom">叶建华 撩学堂金牌讲师</div>
				</div>
			</div>
		</div>
	</div>
</section>

<!--热门课程-->
<!--<section id="hot">
	<div class="container">热门课程</div>
</section>-->
<!--撩学专栏-->
<!--<section id="read">
	<div class="container">撩学专栏</div>
</section>-->
<!--尾部-->
<!--<footer id="footer">
	<div class="container">尾部</div>
</footer>-->
</body>
</html>